<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="my-house" width="10000" height="10000"></canvas>
</body>
<script>
    const canvas = document.getElementById("my-house");
    const ctx = canvas.getContext("2d");
    // Set line width
    ctx.lineWidth = 10;

    // Wall
    ctx.strokeRect(75, 140, 150, 110);
  
    // Door
    ctx.fillRect(130, 190, 40, 60);
    // 绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height。
    
    // Roof
    ctx.beginPath();
    ctx.moveTo(50, 140);
    ctx.lineTo(150, 60);
    //ctx.lineWidth = 10;
    //ctx.lineCap = 'round'; butt-线段末端以方形结束;round-线段末端以圆形结束;square-线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
    ctx.lineTo(250, 140);

    ctx.closePath();
    ctx.stroke();

    //ctx.clearRect(130,190,40,60);
    //设置指定矩形区域内（以 点 (x, y) 为起点，范围是*(width, height)* ）所有像素变成透明，并擦除之前绘制的所有内容。

    ctx.font = "50px serif";
    ctx.fillText("Welocome to my house!",40,350);
    //在 (x,y) 位置绘制（填充）文本。

    ctx.strokeText("Welcome to my hourse!",40,500);
</script>

</html>